<template>
  <div>
    <el-carousel height="380px">
      <el-carousel-item v-for="item in imgList" :key="item">
        <img :src="'/static/' + item" />
      </el-carousel-item>
    </el-carousel>
    <div id="category-container">
      <el-row :gutter="24">
        <el-col :span="4" v-for="item in categoryList" :key="item.key">
          <div class="category-item">
            <div>
              <img :src="'/static/' + item.img" class="category-img" />
            </div>
            <div>
              {{ item.desc }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div id="class-container">
      <div class="class-item class-item-left">
        <div
          class="class-item-item"
          v-for="i in leftClass"
          :key="i.title"
          :style="{
            'background-image': 'url(/static/' + i.img + ')',
            'background-repeat': 'no-repeat',
          }"
        >
          <div class="tip">
            <div>{{ i.title }}</div>
            <div class="tip-button">more+</div>
          </div>
        </div>
      </div>
      <div class="class-item class-item-right">
        <div
          class="class-item-item"
          v-for="i in rightClass"
          :key="i.title"
          :style="{ 'background-image': 'url(/static/' + i.img + ')' }"
        >
          <div class="tip">
            <div>{{ i.title }}</div>
            <div class="tip-button">more+</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: ["c1.jpg", "c1.jpg", "c1.jpg"],
      categoryList: [
        {
          key: 1,
          desc: "Gift for him",
          url: "",
          img: "gift_for_him.webp",
        },
        {
          key: 2,
          desc: "Gift for her",
          url: "",
          img: "gift_for_her.webp",
        },
        {
          key: 3,
          desc: "Gift for husband",
          url: "",
          img: "gift_for_husband.webp",
        },
        {
          key: 4,
          desc: "Gift for wife",
          url: "",
          img: "gift_for_wife.webp",
        },
        {
          key: 5,
          desc: "Boy friend Gift",
          url: "",
          img: "boy_friend_gift.webp",
        },
        {
          key: 6,
          desc: "Girl friend gift",
          url: "",
          img: "girl_friend_gift.webp",
        },
      ],
      leftClass: [
        {
          title: "Clothes",
          img: "left1.webp",
        },
        {
          title: "Shoes",
          img: "left2.webp",
        },
      ],
      rightClass: [
        {
          title: "Bag",
          img: "right1.webp",
        },
        {
          title: "furniture",
          img: "right2.webp",
        },
        {
          title: "Glass",
          img: "right3.webp",
        },
        {
          title: "Food",
          img: "right4.webp",
        },
        {
          title: "Household",
          img: "right5.webp",
        },
        {
          title: "Make-up",
          img: "right6.webp",
        },
      ],
    };
  },
};
</script>

<style>
.category-item {
  width: 100%;
  text-align: center;
  display: inline-block;
}
.category-img {
  height: 115px;
  width: 170px;
}
#category-container {
  margin-top: 50px;
  padding-inline: 18%;
  font-size: 18px;
}
#class-container {
  height: 600px;
  width: 100%;
  text-align: center;
  margin-top: 50px;
  padding-inline: 15%;
}
.class-item {
  border: 1px solid black;
  height: 100%;
  display: inline-block;
  /* background-color: aqua; */
  vertical-align: bottom;
}
.class-item-left {
  width: 18%;
}
.class-item-left .class-item-item {
  height: calc(100% / 2);
}
.class-item-right {
  width: 78%;
}
.class-item-item {
  position: relative;
  margin: 0;
  border: 0;
  padding: 0;
}
.class-item-right .class-item-item {
  width: 50%;
  display: inline-block;
  height: calc(100% / 3);
}
.class-item-item .tip {
  text-align: left;
  position: absolute;
  left: 10%;
  top: 10%;
}
.el-carousel__item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tip-button {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
  cursor: pointer;
  --button-height: 30px;
  text-align: center;
  height: var(--button-height);
  line-height: var(--button-height);
  font-weight: bold;
  color: white;
  border: 2px solid rgba(196,0,0,1);
  background-color: rgba(204, 104, 104, 0.801);
}
</style>